<template>
<div>
 <el-card ref="skuCardRef">
   <el-table
     v-loading="loading"
     :data="spuBaseList" stripe
     style="width: 100%;margin-bottom: 20px" border>
     <el-table-column type="index" label="序号" align="center" width="80"></el-table-column>
     <el-table-column prop="skuName" label="名称" width="180"></el-table-column>
     <el-table-column prop="skuDesc" label="描述" width="180">
     </el-table-column>
     <el-table-column prop="skuDefaultImg" label="默认图片" align="center" width="150">
       <template slot-scope="scope">
         <el-image :src="scope.row.skuDefaultImg" style="width: 100px;height: 100px"></el-image>
       </template>
     </el-table-column>
     <el-table-column label="重量" prop="weight"></el-table-column>
     <el-table-column label="价格" width="80" align="center" prop="price"></el-table-column>
     <el-table-column label="操作" >
       <template slot-scope="scope">
<!--         商品的上架和下架-->
         <tip-button title="上架" type="success" icon="el-icon-top" effect="light" size="mini" v-if="scope.row.isSale === 1" @click.native="changeSaleState(scope.row,'cancelSale')"></tip-button>
         <tip-button title="下架" type="info" icon="el-icon-bottom" effect="light" size="mini" v-else @click.native="changeSaleState(scope.row,'onSale')"></tip-button>
<!--         商品的编辑-->
         <tip-button title="编辑sku" type="primary" icon="el-icon-edit" effect="light" size="mini" @click.native="$message.info('正在开发中')"></tip-button>
<!--         商品的查看-->
         <tip-button title="查看sku信息" type="info" icon="el-icon-warning" effect="light" size="mini" @click.native="showSkuInfo(scope.row)"></tip-button>
<!--         商品的删除-->
         <tip-button title="删除sku" type="danger" icon="el-icon-delete" effect="light" size="mini" style="margin-left: 15px"></tip-button>
       </template>
     </el-table-column>
   </el-table>
<!--   分页器-->
   <el-pagination
     style="text-align: center"
     @size-change="handleSizeChange"
     @current-change="handleCurrentChange"
     :current-page.sync="currentPage"
     :page-size="pageSize"
     :page-sizes="[10,20,30,40]"
     layout=" prev, pager, next,jumper, ->, sizes, total, slot"
     :total="total">
   </el-pagination>
 </el-card>
<!--  展示sku信息的抽屉-->
  <el-drawer
    title="我是标题"
    :visible.sync="drawer"
    :with-header="false"
    :before-close="handlerClose"
    size="50%"
    direction="ltr"
  >
    <el-row type="flex" align="top"><el-col :span="5"><div class="title">名称</div></el-col><el-col :span="19"><p class="inner">{{ skuInfo.skuName }}</p></el-col></el-row>
    <el-row type="flex" align="top"><el-col :span="5"><div class="title">描述</div></el-col><el-col :span="19"><p class="inner">{{ skuInfo.skuDesc }}</p></el-col></el-row>
    <el-row type="flex" align="top"><el-col :span="5"><div class="title">价格</div></el-col><el-col :span="19"><p class="inner">{{ skuInfo.price }}元</p></el-col></el-row>
    <el-row><el-col :span="5"><div class="title">平台属性</div></el-col><el-col :span="19">
      <el-tag type="warning" style="margin-right: 5px;margin-bottom: 5px" v-for="skuAttrVal in skuInfo.skuAttrValueList" :key="skuAttrVal.id">{{ skuAttrVal.attrId }}---{{ skuAttrVal.valueId }}</el-tag>
    </el-col></el-row>
    <el-row><el-col :span="5"><div class="title">商品图片</div></el-col>
      <el-col :span="15">
        <el-card class="box-card">
          <el-carousel>
            <el-carousel-item v-for="item in skuInfo.skuImageList" :key="item.id" style="text-align: center">
              <img :src="item.imgUrl" style="width: 250px;height:250px;">
            </el-carousel-item>
          </el-carousel>
        </el-card>
      </el-col>
      <el-col :span="4"></el-col>
    </el-row>
  </el-drawer>
</div>
</template>

<script>
export default {
  name: "Sku",
  data() {
    return {
      drawer: false, // 控制抽屉显示与隐藏
      currentPage: 1,
      pageSize: 10,
      total: 0,
      loading: true, // 加载中效果
      spuBaseList:[], // sku基础列表
      skuInfo:{} // 点击进行展示的sku的信息
    }
  },
  methods:{
    // 发送请求获取sku列表基础数据
    async getSkuBaseList() {
      this.loading = true
      let res = await this.$API.sku.apiGetSkuBaseList({page: this.currentPage, limit: this.pageSize})
      if(res.code !== 200) {
        this.$message.error('获取数据失败')
        this.loading = false
        return
      }else {
        this.loading = false
        this.spuBaseList = res.data.records
        this.total = res.data.total
      }
    },
    // 页面尺寸改变的回调
    handleSizeChange(size){
      this.pageSize = size
      this.getSkuBaseList()
    },
    // 当前页数发生改变的回调
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.getSkuBaseList()
      scrollTo(0,0)
    },
    // 上架下架切换操作
    async changeSaleState(row,type) {
      let res = await this.$API.sku.apiChangeSaleState(row.id, type)
      if(res.code === 200) {
        if(type === 'cancelSale') {
          this.$message.info('下架成功')
          row.isSale = 0
        }else {
          this.$message.success('上架成功')
          row.isSale = 1
        }
      }
    },
    // 打开抽屉，展示sku的信息
    async showSkuInfo({id}) {
      let res = await this.$API.sku.apiGetSkuInfoById(id)
      if(res.code === 200) {
        this.skuInfo = res.data
        this.drawer = true
      }else {
        this.$message.error('获取数据失败')
      }

    },
    // 抽屉关闭的回调
    handlerClose() {
      this.skuInfo = {}
      this.drawer = false
    }
  },
  created() {
    // 获取基础的sku数据
    this.getSkuBaseList()
  }

}
</script>

<style>
.el-carousel__button {
  width: 20px;
  height: 20px;
  border-radius: 20px;
  background-color: lightcoral;
}
</style>

<style scoped>
.el-row {
  margin-top: 20px;
  margin-left: 50px;
}
.title {
  font-size: 23px;
  font-weight: 700;
  text-align: right;
  margin-right: 10px;
}
.inner {
  margin: 0;
  padding: 0;
  line-height: 40px;
  margin-top: -10px;
}
.box-card {
  height: 400px;
}
</style>
